<style type="text/css">

.callout {
  margin-top: 1em;
  margin-bottom: 1em;  
  border-radius: .25rem;
}

.callout.callout-style-simple { 
  padding: 0em 0.5em;
  border-left: solid #acacac .3rem;
  border-right: solid 1px silver;
  border-top: solid 1px silver;
  border-bottom: solid 1px silver;
  display: flex;
}

.callout.callout-style-default {
  border-left: solid #acacac .3rem;
  border-right: solid 1px silver;
  border-top: solid 1px silver;
  border-bottom: solid 1px silver;
}

.callout .callout-body-container {
  flex-grow: 1;
}

.callout.callout-style-simple .callout-body {
  font-size: 1rem;
  font-weight: 400;
}

.callout.callout-style-default .callout-body {
  font-size: 0.9rem;
  font-weight: 400;
}

.callout.callout-titled.callout-style-simple .callout-body {
  margin-top: 0.2em;
}

.callout:not(.callout-titled) .callout-body {
    display: flex;
}

.callout:not(.no-icon).callout-titled.callout-style-simple .callout-content {
  padding-left: 1.6em;
}

.callout.callout-titled .callout-header {
  padding-top: 0.2em;
  margin-bottom: -0.2em;
}

.callout.callout-titled .callout-title  p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
  
.callout.callout-titled.callout-style-simple .callout-content  p {
  margin-top: 0;
}

.callout.callout-titled.callout-style-default .callout-content  p {
  margin-top: 0.7em;
}

.callout.callout-style-simple div.callout-title {
  border-bottom: none;
  font-size: .9rem;
  font-weight: 600;
  opacity: 75%;
}

.callout.callout-style-default  div.callout-title {
  border-bottom: none;
  font-weight: 600;
  opacity: 85%;
  font-size: 0.9rem;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.callout.callout-style-default div.callout-content {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.callout.callout-style-simple .callout-icon::before {
  height: 1rem;
  width: 1rem;
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

.callout.callout-style-default .callout-icon::before {
  height: 0.9rem;
  width: 0.9rem;
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
  background-size: 0.9rem 0.9rem;
}

.callout-title {
  display: flex
}
  
.callout-icon::before {
  margin-top: 1rem;
  padding-right: .5rem;
}

.callout.no-icon::before {
  display: none !important;
}

.callout.callout-titled .callout-body > .callout-content > :last-child {
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}

.callout.callout-titled .callout-icon::before {
  margin-top: .5rem;
  padding-right: .5rem;
}

.callout:not(.callout-titled) .callout-icon::before {
  margin-top: 1rem;
  padding-right: .5rem;
}

/* Callout Types */

div.callout-note {
  border-left-color: #4582ec !important;
}

div.callout-note .callout-icon::before {
  background-image: url('');
}

div.callout-note.callout-style-default .callout-title {
  background-color: #dae6fb
}

div.callout-important {
  border-left-color: #d9534f !important;
}

div.callout-important .callout-icon::before {
  background-image: url('');
}

div.callout-important.callout-style-default .callout-title {
  background-color: #f7dddc
}

div.callout-warning {
  border-left-color: #f0ad4e !important;
}

div.callout-warning .callout-icon::before {
  background-image: url('');
}

div.callout-warning.callout-style-default .callout-title {
  background-color: #fcefdc
}

div.callout-tip {
  border-left-color: #02b875 !important;
}

div.callout-tip .callout-icon::before {
  background-image: url('');
}

div.callout-tip.callout-style-default .callout-title {
  background-color: #ccf1e3
}

div.callout-caution {
  border-left-color: #fd7e14 !important;
}

div.callout-caution .callout-icon::before {
  background-image: url('');
}

div.callout-caution.callout-style-default .callout-title {
  background-color: #ffe5d0
}

</style>